<template>
  <div class="product-detail-page">
    <div class="product-container">
      <!-- 商品图片 -->
      <div class="image-section">
        <img :src="product.image" alt="商品主图" class="main-image">
        <div class="thumbnail-list">
          <img v-for="(img, index) in product.images" :key="index" :src="img" alt="商品缩略图" class="thumbnail">
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="info-section">
        <h1 class="product-title">{{ product.name }}</h1>
        <p class="product-price">￥{{ product.price }}</p>
        <p class="product-desc">{{ product.description }}</p>
        <div class="specs">
          <div v-for="(spec, index) in product.specs" :key="index" class="spec-item">
            <span class="spec-name">{{ spec.name }}：</span>
            <select v-model="selectedSpecs[spec.key]">
              <option v-for="option in spec.options" :key="option" :value="option">{{ option }}</option>
            </select>
          </div>
        </div>
        <div class="actions">
          <button @click="addToCart" class="btn add-cart">加入购物车</button>
          <button @click="buyNow" class="btn buy-now">立即购买</button>
        </div>
      </div>
    </div>
    <!-- 用户评价 -->
    <section class="reviews">
      <h2>用户评价 ({{ reviews.length }})</h2>
      <div v-for="review in reviews" :key="review.id" class="review-item">
        <div class="review-header">
          <span class="user-name">{{ review.user }}</span>
          <span class="rating">★{{ review.rating }}</span>
          <span class="date">{{ review.date }}</span>
        </div>
        <p class="review-content">{{ review.content }}</p>
        <div v-if="review.images.length" class="review-images">
          <img v-for="(img, index) in review.images" :key="index" :src="img" alt="评价晒图" class="review-img">
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 模拟商品数据
const product = ref({
  id: 1,
  name: '高级无线蓝牙耳机',
  price: 299,
  description: '这是一款高品质无线蓝牙耳机，采用优质材料制作，音质出色，佩戴舒适，适合日常使用。',
  image: 'https://picsum.photos/800/600?random=1',
  images: [
    'https://picsum.photos/800/600?random=1',
    'https://picsum.photos/800/600?random=2',
    'https://picsum.photos/800/600?random=3'
  ],
  specs: [
    { name: '颜色', key: 'color', options: ['红色', '蓝色', '黑色'] },
    { name: '款式', key: 'style', options: ['入耳式', '半入耳式'] }
  ]
})

// 选中的规格
const selectedSpecs = ref({
  color: '红色',
  style: '入耳式'
})

// 模拟评价数据
const reviews = ref([
  {
    id: 1,
    user: '张三',
    rating: 4.5,
    date: '2024-05-20',
    content: '音质非常好，佩戴也很舒适，电池续航能力强，非常满意！',
    images: ['https://picsum.photos/400/300?random=10']
  },
  {
    id: 2,
    user: '李四',
    rating: 5,
    date: '2024-05-18',
    content: '耳机很好，降噪效果不错，连接也很稳定，推荐购买！',
    images: []
  },
  {
    id: 3,
    user: '王五',
    rating: 4,
    date: '2024-05-15',
    content: '外观设计精美，音质清晰，唯一缺点是有点重。',
    images: [
      'https://picsum.photos/400/300?random=11',
      'https://picsum.photos/400/300?random=12'
    ]
  }
])

// 加入购物车
const addToCart = () => {
  // 后续可调用Pinia存储购物车数据
  alert('商品已加入购物车！')
}

// 立即购买
const buyNow = () => {
  // 跳转至结算页
  alert('立即购买功能待完善，将跳转至结算页')
}
</script>

<style scoped>
.product-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.product-container {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.image-section {
  flex: 1;
  max-width: 500px;
}

.main-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
}

.thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.info-section {
  flex: 1;
}

.product-title {
  font-size: 24px;
  margin: 0 0 15px 0;
}

.product-price {
  font-size: 28px;
  color: #e4393c;
  margin: 0 0 15px 0;
}

.product-desc {
  color: #666;
  margin: 0 0 20px 0;
}

.specs {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spec-name {
  color: #333;
}

.spec-item select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 120px;
}

.actions {
  display: flex;
  gap: 20px;
}

.btn {
  padding: 12px 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: opacity 0.3s;
}

.add-cart {
  background: #ff4747;
  color: white;
}

.buy-now {
  background: #2196f3;
  color: white;
}

.btn:hover {
  opacity: 0.9;
}

.reviews {
  border-top: 1px solid #eee;
  padding-top: 30px;
}

.review-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.user-name {
  font-weight: bold;
  color: #333;
}

.rating {
  color: #ff9800;
}

.date {
  color: #999;
  font-size: 14px;
}

.review-content {
  color: #666;
  margin: 0 0 10px 0;
}

.review-images {
  display: flex;
  gap: 10px;
}

.review-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}
</style>  